<template>
    <div class="list-container">
        <div class="tab">
            <div class="tab-item" :class="{ 'tab-item--active': activeTab === 0 }" @click="activeTab = 0">预警项目</div>
            <!-- <div class="tab-item" :class="{ 'tab-item--active': activeTab === 1 }" @click="activeTab = 1">其他预警</div> -->
        </div>
        <NavCard></NavCard>
        <BreadCrumb class="bread-crumb" />
        <div class="detail">
            <router-view/>
        </div>
    </div>
</template>
<script>
import NavCard from '@/views/pre-warning-management/components/nav-card.vue'
import BreadCrumb from '@/components/bread-crumb/index.vue'

export default {
    name: 'PreWarningManagement',
    components: {
        NavCard,
        BreadCrumb,
    },
    data() {
        return {
            activeTab: 0,
        }
    },
    watch: {
        activeTab: {
            handler() {
                this.updateQuery()
            }
        },
        '$route.path': {
            handler() {
                this.updateQuery()
            }
        }
    },
    methods: {
        updateQuery() {
            this.$router.replace({
                path: this.$route.path,
                query: {
                    ...this.$route.query,
                    activeTab: this.activeTab,
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.list-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #F7F8FD;

    .tab {
        display: flex;
        align-items: center;
        margin-top: 17px;
        padding: 17px 18px 0;
        background-color: #fff;
        .tab-item {
            margin-right: 31px;
            font-weight: 500;
            font-size: 18px;
            color: #514F4F;
            height: 18px;
            line-height: 18px;
            cursor: pointer;

            &--active {
                color: #000;
            }
        }
    }
}

.bread-crumb {
    margin-top: 21px;
    padding-left: 20px;
}

.detail {
    margin-top: 9px;
    margin-left: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 5px;

}
</style>
